<script type="text/javascript" src="http://localhost:8090/mdg-social-elgg/vendors/jquery/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://localhost:8090/mdg-social-elgg/vendors/jquery/jquery-ui-1.8.16.min.js"></script>
<script type="text/javascript" src="http://localhost:8090/mdg-social-elgg/js/elgg.0.js?view=default"></script>
<script type="text/javascript" src="http://localhost:8090/mdg-social-elgg/mod/igolf_map/js/map.js"></script>
<?php
$golf_course_id = get_input('golf_course_id');
$hole = get_input('hole');
$tee = get_input('tee');

//Test
$golf_course_id = 1;
$hole = 1;
$tee = 'gold'; 


$cards = elgg_get_golf_course_card(array('golf_course_id'=>$golf_course_id, 'hole'=> $hole));
$card = $cards[0];

$golf_course_card_id = $card->golf_course_card_id;
$map = $card->map;
$attrs = getTeeAttributes($tee, $card);

$tee_x = $attrs['tee_x'] ? $attrs['tee_x'] : 0;
$tee_y = $attrs['tee_y'] ? $attrs['tee_y'] : 0;

$hole_x = $attrs['hole_x'] ? $attrs['hole_x'] : 98;
$hole_y = $attrs['hole_y'] ? $attrs['hole_y'] : 884;

$distance = $attrs['distance'] ? $attrs['distance'] : 400;


?>

<div id="map">
	<img src="<?php echo elgg_get_site_url();?>mod/igolf_map/graphics/<?php echo $map?>" />	
	<div id="tee_container" class="draggable object"><span id='item'>0</span><br><span id='tee_label'>tee</span></div>
	<div id="ball_container" class="draggable object"><span id='item'>0</span><br><span id='ball_label'>ball</span></div>
	<div id="target_container" class="draggable object"><span id='item'>0</span><br><span id='target_label'>target</span></div>
	<div id="hole_container" class="draggable object"><span id='item'>0</span><br><span id='helo_label'>hole</span></div>
</div>
<div id="history">
	<input type="button" value="Shot" onclick="shot();"/>
	<div id="content">
	</div>
</div>

<script>
var tee_x = <?php echo $tee_x?>;
var tee_y = <?php echo $tee_y?>;

var hole_x = <?php echo $hole_x?>;
var hole_y = <?php echo $hole_y?>;

var distance = <?php echo $distance?>

//Setup Map
var map = new Map(distance);
map.setTeePosition(tee_x,tee_y);
map.setHolePosition(hole_x,hole_y);
map.ball.setPosition(tee_x,tee_y);
map.ball.departure.setPosition(tee_x,tee_y);
map.target.setPosition(tee_x,tee_y);

console.log(map);

//Draw
var teeContainer = $('#tee_container');
var holeContainer = $('#hole_container');
var ballContainer = $('#ball_container');
var targetContainer = $('#target_container');

var tee = $('#tee_container #item');
var hole = $('#hole_container #item');
var target = $('#target_container #item');
var ball = $('#ball_container #item');

teeContainer.offset({ top: map.tee.x, left: map.tee.y });
holeContainer.offset({ top: map.hole.x, left: map.hole.y });
ballContainer.offset({ top: map.ball.x, left: map.ball.y });
targetContainer.offset({ top: map.target.x, left: map.target.y });

tee.text(teeContainer.position().top + '|' + teeContainer.position().left);

targetContainer.draggable({
	drag: function(){
		setBallTargetDistance();
	}
});

ballContainer.draggable({
	drag: function(){
		setBallShotDistance();
		setBallTargetDistance();
	},
	stop: function(){
		resetBallShot();
	}
});

function setBallTargetDistance(){
	map.target.setPosition(target.position().top, target.position().left);
	map.ball.setPosition(ball.position().top, ball.position().left);
	target.text(map.getTargetToBallDistance());
}

function setBallShotDistance(){
	map.ball.setPosition(ball.position().top, ball.position().left);
	ball.text(map.getBallShotDistance());
}

function resetBallShot(){
	map.ball.departure.setPosition(map.ball.x,map.ball.y);
}


function shot(){
	var departure = map.getDeparturePosition(); //Offset
	 
	$.ajax({type: "POST",
		url: '<?php echo elgg_get_site_url() . "ajax/view/igolf_map/shot" ?>',
		dataType: "html",
		cache: false,
		data: {
			golf_course_card_id : "<?php echo $golf_course_card_id?>",
			shot_position_x : departure.top,
			shot_position_y : departure.left,
			distance_to_hole: 400,
		},
		success: function(data) {
			
		}
	});
}

</script>

 <style>
.draggable {
	width: 20px;
	height: 20px;
	background: #ccc;
	cursor: pointer;
	text-align: center;
}

#map {
	/*background: transparent url(<?php echo elgg_get_site_url();?>mod/igolf_map/graphics/<?php echo $map?>) no-repeat;*/
}

#map img{
display:block;
z-index: -1;
}
#map div{
z-index: 20;
}
</style>